import { useEffect, useState } from "react";
import './dyx_Find.css'
import { useNavigate } from "react-router-dom";
import { LeftOutline, DeleteOutline } from 'antd-mobile-icons'
import axios from 'axios'
let dyx_Find = (props) => {
    let Navigate = useNavigate()
    let [name, setName] = useState("")
    let [list, setList] = useState([])
    let [flag,setFlag]=useState(true)
    let his_xuan = () => {
        axios.get('http://127.0.0.1:3000/dyx_index/dyx_history').then(res => {
            if (res.data.code == 200) {
                setList(res.data.data)
            }
        })
    }
    useEffect(() => {
        his_xuan()
    }, [])
    return (
        <>
            <div className="dyx_Find_box">
                <div className="dyx_Find_header">
                    <div className="dyx_find_fan">
                        <LeftOutline onClick={()=>{
                           Navigate('/Foot/Shou')
                        }} />
                    </div>
                    <div className="dyx_find_input">
                        <input type="text" value={name} onChange={(e) => {
                            setName(e.target.value)
                        }} placeholder="搜索目的地/景点" />
                    </div>
                    <div className="dyx_find_button">
                        <button onClick={() => {
                            localStorage.setItem('name',JSON.stringify(name))
                            Navigate(`/Find_jing`)
                            let obj = {
                                name: name
                            }
                            axios.post('http://127.0.0.1:3000/dyx_index/dyx_history', obj).then(res => {
                                if (res.data.code == 200) {
                                    his_xuan()

                                }
                            })
                        }}>搜索</button>
                    </div>
                </div>
                <div className="dyx_Find_main">
                    <div className="dyx_find_span">
                        <span style={{ fontSize: "1.6rem", marginLeft: "1.5rem", fontFamily: "幼圆" }}>历史记录</span>
                        {
                            flag? <DeleteOutline onClick={()=>{
                                setFlag(!flag)
                            }} style={{ position: "absolute", right: "2rem", top: "9rem", fontSize: "1.8rem" }} />:
                            <span style={{ position: "absolute", right: "2rem", top: "7.5rem", fontSize: "1.8rem" }}>全部删除</span>
                        }
                    </div>
                    <div className="dyx_find_his">
                        {
                            flag?list.map(item => {
                                return <div key={item._id} className="dyx_find_hist">
                                    <p>{item.name}</p>
                                </div>
                            }):list.map(item => {
                                return <div key={item._id} className="dyx_find_hist">
                                    <p>{item.name} <span onClick={()=>{
                                        axios.delete('http://127.0.0.1:3000/dyx_index/dyx_history',{params:{id:item._id}}).then(res=>{
                                            if(res.data.code==200){
                                                 his_xuan()
                                                 setFlag(!flag)
                                             }else{
                                            }
                                        })
                                    }}>X</span>
                                    </p>
                                </div>
                            })
                        }
                    </div>
                    <div className="dyx_find_span" style={{ marginTop: "1rem" }}>
                        <span style={{ fontSize: "1.6rem", marginLeft: "1.5rem", fontFamily: "幼圆" }}>热门推荐</span>
                        {/* <DeleteOutline style={{ position: "absolute", right: "2rem", top: "9rem", fontSize: "1.8rem" }} /> */}
                    </div>
                    <div className="dyx_find_his">
                        <div className="dyx_find_hist">
                            <p>北京万达文华酒店</p>
                        </div>
                        <div className="dyx_find_hist">
                            <p>汤山温泉</p>
                        </div>
                        <div className="dyx_find_hist">
                            <p>热门推荐三</p>
                        </div>
                        <div className="dyx_find_hist">
                            <p>热门推荐</p>
                        </div>
                        <div className="dyx_find_hist">
                            <p>热门推荐五</p>
                        </div>

                    </div>
                </div>

            </div>

        </>
    )
}

export default dyx_Find;

